<template>
  <div class="home_platform">
    <ITitle :title="'解锁车企营销新境界，就选最车平台'" :borderVail="false"></ITitle>
    <div :class="{ flex_left_right: !isMobile(), home_main_m: !isMobile() }">
      <ICard
        @click="active = index"  @mouseover="active = index"
        class="flex_right platform_item m_t_56 border_r_10 cup"
        :class="{ active_card: active === index }"
        :row="{
          ...item,
          img: active === index ? item.acviteImg : item.img,
        }"
        v-for="(item, index) in dataList"
        :key="index"
      >
        <template #default="{ row }">
          <div class="card_row">
            <div class="row_title font_22 m_t_40 m_b_10"> {{ row.title }}</div>
            <div class="row_dis font_14 line_height_20">{{ row.dis }}</div>
          </div>
        </template>
      </ICard>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, defineAsyncComponent } from 'vue'
  import { isMobile } from '@/utils'

  const ICard = defineAsyncComponent(() => import('@/components/comm/ICard.vue'))
  const active = ref(-1)
  const dataList = ref<any[]>([
    {
      title: '精准洞察，线索挖掘快准狠',
      dis: '“最车” 平台以品牌、车系等多维度精细客户营销，线索精准度大幅提升，直击高潜客户，告别无效营销。',
      acviteImg: 'platform_group_active_1',
      img: 'platform_group_1',
    },
    {
      title: '资源聚合，营销场景全拓展',
      dis: '整合 30+直播基地、2000+达人等资源，海量营销渠道多维获客，全域覆盖目标客群。',
      acviteImg: 'platform_group_active_2',
      img: 'platform_group_2',
    },
    {
      title: '高效协同，营销流程加速度',
      dis: '线索中台智能调度，大大缩短供应商任务周期，营销筹备到上线提速明显，抢占市场分秒必争。',
      acviteImg: 'platform_group_active_3',
      img: 'platform_group_3',
    },
  ])
</script>
<style scoped lang="less">
  .home_platform {
    .active_card {
      background: rgba(27, 103, 255, 1);
      color: #ffffff;
    }
    .platform_item {
      text-align: center;
       transition: all 1s ease;
    }
  }
</style>
